<template>
  <div id="app">
    <myHeader @showSearchGroup="showSearchGroup" @showCreateGroup="showCreateGroup" @showRegister="showRegister"
              @showCreateNotice="showCreateNotice" @showLogin="showLogin" @showSearchFriend="showSearchFriend">
    </myHeader>
    <div class="main-content">
      <transition name="my-trans" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <myFooterr></myFooterr>
    <myDialog :show="showdialog"></myDialog>
  </div>
</template>

<script>
  /* eslint-disable padded-blocks */
  import myHeader from './views/Header'
  import myFooterr from './views/Footer'
  import myDialog from './views/header/dialog'
  import Bus from './bus/bus'

  export default {
    components: {myHeader, myFooterr, myDialog},
    name: 'app',
    data () {
      return {
        flag: false,
        flag2: false,
        showdialog: {
          RegisterFormVisible: false,
          LogInFormVisible1: false,
          CreateNoticeFormVisible: false,
          CreateGroupFormVisible: false,
          SearchFormVisible: false,
          SearchFriendVisible: false
        },
        checked: true,
        msg:
          'Welcome to Your Vue.js App',
        gridData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }
        ]
      }
    },
    methods: {
      showSearchGroup () {
//        this.SearchFormVisible = true
        this.showdialog.SearchFormVisible = true
      },
      showCreateGroup () {
//        this.CreateGroupFormVisible = true
        this.showdialog.CreateGroupFormVisible = true
      },
      showCreateNotice () {
//        this.CreateNoticeFormVisible = true
        this.showdialog.CreateNoticeFormVisible = true
      },
      showRegister () {
//        this.RegisterFormVisible = true
        this.showdialog.RegisterFormVisible = true
      },
      showLogin () {
//        this.LogInFormVisible1 = true
        this.showdialog.LogInFormVisible1 = true
      },
      showSearchFriend () {
        this.showdialog.SearchFriendVisible = true
      },
      onSubmit () {
        console.info('ss')
      }
    },
    beforeCreate: function () {
      if (sessionStorage.getItem('user_id')) {
        this.$store.commit('getUser_id', sessionStorage.getItem('user_id'))
      }
    },
    mounted: function () {
      var _this = this
      window.onscroll = function () {
        var a = document.documentElement.scrollTop || document.body.scrollTop
        var b = document.documentElement.clientHeight || document.body.clientHeight
        var c = document.documentElement.scrollHeight || document.body.scrollHeight
//        console.log(a)
        if (a > 512) {
          _this.flag = true
        } else {
          _this.flag = false
        }

        if (a > 64) {
          _this.flag2 = true
        } else {
          _this.flag2 = false
        }

        if (a + b === c) {
          console.log('已滚动到底部!')
          Bus.$emit('loadMore')
        }
      }
      Bus.$on('logIn', () => {
        this.showLogin()
      })
    },
    watch: {
      flag (current, watch) {
        console.log(current)
        Bus.$emit('toFix', current)
      },
      flag2 (current, watch) {
        console.log(current)
        Bus.$emit('toFix2', current)
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    min-width: 900px;
    color: #2c3e50;
    /*background: lightseagreen;*/
  }

  a {
    text-decoration: none;
    color: black;
  }

  .main-content {
    background: #EEE8AA;
    min-height: calc(100vh - 160px);
    max-width: 1160px;
    overflow: hidden;
    margin: 0 auto;

    padding-bottom: 20px;
  }

  .my-trans-enter-active, .my-trans-leave-active {
    transition: all 0s ease-out;
  }

  .my-trans-enter {
    transform: translateX(500px);
    opacity: 0;
  }

  .my-trans-leave-active {
    transform: translateX(-500px);
    opacity: 0;
  }

  ul {
    list-style: none;
    padding-left: 0;
  }

  /*公共*/
  .middle-avatar {
    margin: 0 20px;
    vertical-align: middle;
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }

  .middle-avatar2 {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 0 0 1px #fff;
  }

  .left {
    float: left;
  }

  .right {
    float: right;
  }

  .card:hover {
    transform: scale(1.01);
    transition: transform .2s ease-in;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
  }

</style>
